<#macro layout>
<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="${request.contextPath}/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="${request.contextPath}/easyui/themes/bootstrap/easyui.css" />
		<link rel="stylesheet" type="text/css" href="${request.contextPath}/easyui/themes/icon.css" />
		<link rel="stylesheet" type="text/css" href="${request.contextPath}/easyui/themes/color.css" />
		<script src="${request.contextPath}/easyui/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="${request.contextPath}/easyui/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="${request.contextPath}/easyui/plugins/jquery.portal.js" type="text/javascript" charset="utf-8"></script>
		<script src="${request.contextPath}/easyui/plugins/datagrid-detailview.js" type="text/javascript" charset="utf-8"></script>
		<script src="${request.contextPath}/easyui/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
		
		<title>${apptitle}</title>
</head>
<body class="easyui-layout">
	 	<div data-options="region:'north'" style="height:63px;padding:10px;">
	 		<div style="float: left;width:300px;">
				<label style="font-size:24px;">${apptitle}</label>
			</div>
			<div id="systools" class="easyui-panel" data-options="border:false,height:'100%'"  align="right" style="float: right;vertical-align: middle;">
				<#if userinfo??>
					<a href="#" class="easyui-menubutton" data-options="menu:'#mm1',iconCls:'glyphicon glyphicon-user'">${userinfo.userName}</a>
					<div id="mm1" >					
						<div data-options="iconCls:'glyphicon glyphicon-log-out'">
							<a href="${request.contextPath}/logout">退出</a>
						</div>	
					</div>
		 			<script type="text/javascript" charset="utf-8">
		 			function userlogout(){
		 				$.post("${request.contextPath}/login/logoutAction",function(){
		 						window.location.href="${request.contextPath}/login";
		 					});
		 			}
		 			</script>
		 			
		 			
		 		</#if>
			</div>
	 		
	 	</div>
		<div align="center" data-options="region:'south'" style="height:30px;color:#5F5F5F;font-size: 18px;">
			${appcopyright}
		</div>
	    <div data-options="region:'west',title:'导航',split:true" style="min-width: 150px;max-width: 230px;">
	    	<#nested/>
	    </div>
	 	<div data-options="region:'center'">
	 		 <div id="mainTabs">
	 		 	<div title="首页">
			 		<iframe id="mainframe" src="${request.contextPath}/wellcome" class="easyui-panel" data-options="fit:true,border:false" frameborder="0"></iframe>
				</div>
	 		 </div>
	 	</div>
	 	
	 	<div id="tabsMenu"> 
		    <div data-options="iconCls:''" type="refresh" style="font-size: 12px;">刷新</div>
		    <div class="menu-sep"></div>
		    <div data-options="iconCls:''" type="close" style="font-size: 12px;">关闭</div>
		    <div data-options="iconCls:''" type="closeOther">关闭其他</div>
		    <div data-options="iconCls:''" type="closeAll">关闭所有</div>
		</div>
		<script>
			$(function(){
				var mainTab=$('#mainTabs').tabs({
					fit : true,
		    		border : false,
		    		onContextMenu:function(e,title){
		    			e.preventDefault();
		    			$('#tabsMenu').menu('show',{left : e.pageX,top : e.pageY}).data('tabTitle', title);
		    		}
				});
				
				var tabsMenu = $('#tabsMenu').menu({
				    onClick : function(item) {
				    	var mainTabs=$('#mainTabs');
				        var curTabTitle = $(this).data('tabTitle');
				        var type = $(item.target).attr('type');
			
				        if (type === 'refresh') {
				            var iframe = mainTabs.tabs('getSelected').panel('panel').find('iframe');
				            iframe.attr("src", iframe.attr("src"));
				            return;
				        }
			
				        if (type === 'close') {
				            var t = mainTabs.tabs('getTab', curTabTitle);
				            if (t.panel('options').closable) {
				                mainTabs.tabs('close', curTabTitle);
				            }
				            return;
				        }
			
				        var allTabs = mainTabs.tabs('tabs');
				        var closeTabsTitle = [];
			
				        $.each(allTabs, function() {
				            var opt = $(this).panel('options');
				            if (opt.closable && opt.title != curTabTitle
				                    && type === 'closeOther') {
				                closeTabsTitle.push(opt.title);
				            } else if (opt.closable && type === 'closeAll') {
				                closeTabsTitle.push(opt.title);
				            }
				        });
			
				        for ( var i = 0; i < closeTabsTitle.length; i++) {
				            mainTabs.tabs('close', closeTabsTitle[i]);
				        }
				    }
				});
			});
		
			function menuHandler(item){
			    var mainTab=$('#mainTabs');
				var curTabTitle = $(this).data('tabTitle');
	      		var type = $(item.target).attr('type');
	      		console.log(curTabTitle);
	      		console.log(type);
	      		if (type === 'refresh') {
		            var iframe = mainTabs.tabs('getSelected').panel('panel').find('iframe');
		            iframe.attr("src", iframe.attr("src"));
		            return;
		        }
			}
		</script>
</body>
</html>
</#macro>
